<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="js/Recalc.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="css/circle-detail.css" />
	<title>圈子详情</title>
</head>

	<body>
		<div class="web">
			<header>
				<a href="theme.html"><img src="img/right.png"/></a>
				<p>圈子详情</p>
			</header>
			<section>
				<div class="line"></div>
				<article>
					<div class="ul_top">
						<ul>
							<li>
								<span>圈主</span>
								<span>Fion</span>
								<a class="fr" href="">></a>
							</li>
							<li>
								<span>圈名</span>
								<span>#全国舞蹈赛#</span>
							</li>
							<li>
								<span>简介</span>
								<span>**年国际超模广东赛区十佳</span>
							</li>
							<li>
								<span>邀请艺友一起玩</span>
								<div class="link fr">
									<a href="share-codes.html"><img src="img/icon13.png" /></a>
									<a href="">></a>
								</div>
							</li>
						</ul>
						<div class="number clearfix">
							<p>
								<span>圈子成员</span>
								<span>318</span>

								<span>帖子</span>
								<span>268</span>

								<span>阅读</span>
								<span>300</span>
							</p>
						</div>
						<ul class="ul_bottom" id="ul_bottom">
							<li>
								<span>顶置圈子</span>
								<div class="on-off fr">
									<button></button>
								</div>
							</li>
							<li>
								<span>接收圈子新帖通知</span>
								<div class="on-off fr">
									<button></button>
								</div>
							</li>
							<li>
								<span>关闭声音</span>
								<div class="on-off fr">
									<button></button>
								</div>
							</li>
						</ul>
						<div class="member-table">
							<p>
								<span>小组成员</span>
								<a class="fr" href="">查看全部</a>
							</p>
							<ul>
								<li>
									<div class="mumber_img">
										<img src="img/mumber1.png" />
									</div>
									<span>Yoyo莫名...</span>
								</li>
								<li>
									<div class="mumber_img">
										<img src="img/mumber2.png" />
									</div>
									<span>奈奈桑</span>
								</li>
								<li>
									<div class="mumber_img">
										<img src="img/mumber3.png" />
									</div>
									<span>小马哥132</span>
								</li>
								<li>
									<div class="mumber_img">
										<img src="img/mumber4.png" />
									</div>
									<span>guanyuch...</span>
								</li>

								<li>
									<div class="mumber_img">
										<img src="img/mumber1.png" />
									</div>
									<span>Yoyo莫名...</span>
								</li>
								<li>
									<div class="mumber_img">
										<img src="img/mumber2.png" />
									</div>
									<span>奈奈桑</span>
								</li>
								<li>
									<div class="mumber_img">
										<img src="img/mumber3.png" />
									</div>
									<span>小马哥132</span>
								</li>
								<li>
									<div class="mumber_img">
										<img src="img/mumber4.png" />
									</div>
									<span>guanyuch...</span>
								</li>
								<li>
									<div class="mumber_img">
										<img src="img/mumber1.png" />
									</div>
									<span>Yoyo莫名...</span>
								</li>
								<li>
									<div class="mumber_img">
										<img src="img/mumber2.png" />
									</div>
									<span>奈奈桑</span>
								</li>
								<li>
									<div class="mumber_img">
										<img src="img/mumber3.png" />
									</div>
									<span>小马哥132</span>
								</li>
								<li>
									<div class="mumber_img">
										<img src="img/mumber4.png" />
									</div>
									<span>guanyuch...</span>
								</li>
							</ul>

						</div>
						<div class="return">
							<a href="">退出该圈子</a>
						</div>
					</div>

				</article>

			</section>
			<footer>

			</footer>
		</div>

		<script type="text/javascript">
			document.body.style.height = window.innerHeight + "px";
		</script>
		<script>
			var oUl=document.getElementById('ul_bottom');
			var aLi=oUl.getElementsByTagName('li');
			for(var i=0;i<aLi.length;i++){
				
				aLi[i].oBtn=true;
				aLi[i].onmouseover=function(){
					var This=this;
					var oDiv=this.getElementsByTagName('div')[0];
					var oButton=oDiv.getElementsByTagName('button')[0];
					oButton.onclick=function(){
						if(This.oBtn){
							This.className='active';
							This.oBtn=false;
						}else{
							This.className='';
							This.oBtn=true;
						}
						
					}
				}
			}
		</script>
	</body>

</html>